<!--
 * @Author: [yuantongxin]
 * @Date: 2021-09-22 11:15:13
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-23 19:42:20
 * @Description: 
-->
<template>
    <div>
         <Header/>
    <!-- 体部开始 -->
    <div class="content">
      <div class="wrapper">
        <div class="inner_content">
          <div class="articleList">
            <div class="title">{{articleList.title}}</div>
            <div class="time">
              <span>发表时间：{{articleList.publishTime | fmtDate}}</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>阅读次数：{{articleList.readTimes}}</span>
            </div>
            <div class="content1" v-html="articleList.content">{{articleList.content}}</div>
          </div>


          
          <!-- 右侧表格开始 -->
          <div class="rank">
            <div class="top">
              <div class="head">最新</div>
              <ul>
                <!-- 标题title -->
                <li class="list_list" v-for="item in hotspots" :key="item.id">
                  <div class="artitle">&nbsp;&nbsp;●&nbsp;&nbsp;{{item.title}}</div>
                  <div class="list">
                    <!-- 发表时间 -->
                   <span>发表时间：{{item.publishTime | fmtDate}}</span>            
                  </div>
                </li>
              </ul>
            </div>
            <div class="bottom">
              <div class="head">热门</div>
               <ul>
                <!-- 标题title -->
                <li class="list_list" v-for="item in hotspots" :key="item.id">
                  <div class="artitle">&nbsp;&nbsp;●&nbsp;&nbsp;{{item.title}}</div>
                  <div class="list">
                    <!-- 发表时间 -->
                    <span>阅读次数：{{item.readTimes}}</span>              
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 右侧表格开始 -->

        </div>
      </div>
    </div>
    <!-- 体部结束 -->
    <Footer/>
    </div>
</template>

<script>
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"
import { get } from '../utils/request'
export default {
    components:{
        Header,
        Footer
    },
    data(){
        return {
            // category:[],
            articleList:null,
            hotspots:[],
            // 
            // id=0
        }
    },

    methods:{
 
        hotspot(){
            let url = '/index/article/findHotArticles'
            get(url).then(res=> {
                this.hotspots = res.data
                // console.log(res);
            })
        },
        
    },
    created(){
      //获取list传过来的参数
        this.articleList = this.$route.query;
        console.log(this.articleList)
        
        this.hotspot()
    }
}
</script>

<style lang="scss" scoped>
  
  .content{
    
    padding: 2em 1em;
    & > .wrapper{
      .inner_content{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        & > div{
          background-color: #fff;
          min-height: 800px;
            width:800px;
          padding: .5em .5em;
          border-radius: 5px;
        }
        .articleList{
          .time{
            text-align: center;
            padding: 1em;
            border-bottom: 2px solid #ccc;
            color: #666666;
          }
          .title{
            font-size: 24px;
            font-weight: bold;
            color:#061b74;
            padding: .5em 1em;
            text-align: center;
          }
          .content1{
          background-color: #fff;
          font-size: 16px;
          color: #333333;
          font-family: "微软雅黑";
          line-height: 30px;
          }

        }


        .rank{
          background-color: #b0c6e7;
          flex-basis: 300px;
            color:#061b74 ;
            height: 800px;

          .top{
            border-radius: 5px;
            height: 390px;
            background-color:#fff;
            margin-bottom: 20px;
            // color:#1f5fb9 ;
            .head{
              background-color: #0171c5;
              border-radius: 3px;
              color: #fff;
              font-size: 24px;
              display: inline-block;
              padding: .4em .5em;
            }
             .list_list{
             div{
              line-height: 0.4em;
              padding: 1em .5em;
            }
             border-bottom: 1px solid #ededed;
            }
             ul > li {
              line-height: 3em;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            ul > li:hover {
              color: #1e58b3;
              cursor: pointer;
            }
          }
          .bottom{
            border-radius: 5px;
            height: 390px;
            background-color: #fff;
             .head{
              background-color: #ff7800;
              border-radius: 3px;
              color: #fff;
              font-size: 24px;
              display: inline-block;
              padding: .4em .5em;

            }
            .list_list{
             div{
              line-height: 0.4em;
              padding: 1em .5em;
            }
             border-bottom: 1px solid #ededed;
            }
             ul > li {
              line-height: 3em;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            ul > li:hover {
              color: #1e58b3;
              cursor: pointer;
            }
          }
        }
      }
      
        ul > li:hover {
              color: #1e58b3;
              cursor: pointer;
            }
      
    
    }
    background-image: url('../assets/resoure/img/bbgg.jpg');
    background-size: contain;
  }
</style>